<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="${request.contextPath}/statics/libs/jquery.min.js"></script>
    <script src="${request.contextPath}/statics/plugins/layer/layer.js"></script>
    <script src="${request.contextPath}/statics/libs/bootstrap.min.js"></script>
    <script src="${request.contextPath}/statics/libs/vue.min.js"></script>
    <script src="${request.contextPath}/statics/plugins/jqgrid/grid.locale-cn.js"></script>
    <script src="${request.contextPath}/statics/plugins/jqgrid/jquery.jqGrid.min.js"></script>
    <script src="${request.contextPath}/statics/plugins/ztree/jquery.ztree.all.min.js"></script>
    <script src="${request.contextPath}/statics/js/common.js"></script>
    <script src="${request.contextPath}/statics/plugins/seat/jquery.seat-charts.min.js"></script>
    <style type="text/css">
        .demo{width:790px; margin:40px auto 0 auto; min-height:450px;}
        @media screen and (max-width: 360px) {.demo {width:340px}}
        ol, ul {
            list-style: none;
        }
        .front{width: 300px;margin: 5px 32px 45px 32px;background-color: #f0f0f0;	color: #666;text-align: center;padding: 3px;border-radius: 5px;}
        .booking-details {float: right;position: relative;width:200px;height: 350px; }
        .booking-details h3 {margin: 5px 5px 0 0;font-size: 16px;}
        .booking-details p{line-height:26px; font-size:16px; color:#999}
        .booking-details p span{color:#666}
        div.seatCharts-cell {color: #182C4E;height: 25px;width: 30px;line-height: 25px;margin: 3px;float: left;text-align: center;outline: none;font-size: 10px;}
        div.seatCharts-seat {color: #fff;cursor: pointer;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;}
        div.seatCharts-row {height: 35px;}
        div.seatCharts-seat.available {background-color: #B9DEA0;}
        div.seatCharts-seat.focused {background-color: #76B474;border: none;}
        div.seatCharts-seat.selected {background-color: #E6CAC4;}
        div.seatCharts-seat.unavailable {background-color: #472B34;cursor: not-allowed;}
        div.seatCharts-container {border-right: 1px dotted #adadad;width: 530px;padding: 20px;float: left;}
        div.seatCharts-legend {padding-left: 0px;position: absolute;bottom: 16px;}
        ul.seatCharts-legendList {padding-left: 0px;}
        .seatCharts-legendItem{float:left; width:90px;margin-top: 10px;line-height: 2;}
        span.seatCharts-legendDescription {margin-left: 5px;line-height: 30px;}
        .checkout-button {display: block;width:80px; height:24px; line-height:20px;margin: 10px auto;border:1px solid #999;font-size: 14px; cursor:pointer}
        #selected-seats {max-height: 150px;overflow-y: auto;overflow-x: none;width: 200px;}
        #selected-seats li{float:left; width:72px; height:26px; line-height:26px; border:1px solid #d3d3d3; background:#f7f7f7; margin:6px; font-size:14px; font-weight:bold; text-align:center}

        #seat-map div:nth-child(10n){ border-bottom:1px dashed #ccc;}
    </style>
</head>
<body>
<label id="count" style="margin:10px 0 0 100px; font-size: large" ></label><br>
<label id="member" style="margin:10px 0 0 100px; font-size: large"></label>
<label id="business" style="margin:10px 0 0 100px; font-size: large"></label>

<div id="main">
    <h2 class="top_title"></h2>
    <div class="demo">
        <div id="seat-map">
        </div>
        <div class="booking-details">
            <p>区域：<span id="area">A区</span></p>
            <p>时间：
                <span>
                    <select id="valid_date">
                        <option value="2019-07-18" selected>2019-07-18</option>
                        <option value="2019-07-19">2019-07-19</option>
                        <option value="2019-07-20">2019-07-20</option>
                    </select>
                </span>
            </p>
            <p>桌号：</p>
            <ul id="selected-seats"></ul>
            <p>类型：<span id="type">-</span></p>
            <p>剩余票数：<span id="counter">0</span></p>
            <p>未分配位置数：<span id="counter_no">0</span></p>
            <div id="legend"></div>
        </div>
        <div style="clear:both"></div>
    </div>

    <br/>
</div>

<script type="text/javascript">

    $(getBeerSeatCount());

    function getBeerSeatCount(){
        $.ajax({
            type: "GET",
            url: baseURL + 'noc/nocbeerseat/count',
            contentType: "application/json",
            data:{validDate: $('#valid_date option:selected').text()},
            success: function(r){
                $("#count").html(r.seatNum);
                $("#business").html(r.business);
                $("#member").html(r.member);

            }
        });
    }

    //

    $(document).ready(function() {
        var $cart = $('#selected-seats'), //座位区
            $counter = $('#counter')//票数

        var sc = $('#seat-map').seatCharts({
            map: [  //座位图
                'aaaaaaaaaaa__',
                'aaaaaaaaaaaaa',
                'aaaaaaaaaaaaa',
                'aaaaaaaaaaaaa',
                'aaaaaaaaaaaaa',
                'aaaaaaaaaaaaa',
                'aaaaaaaaaaaaa',
                'aaaaaaaaaaaaa',
                'aaaaaaaaaaaaa',
                'aaaaaaaaaaaaa'
            ],
            naming : {
                top : false,
                getLabel : function (character, row, column) {
                    return column;
                }
            },
            legend : { //定义图例
                node : $('#legend'),
                items : [
                    [ 'a', 'available',   '可选座' ],
                    [ 'a', 'unavailable', '已满座']
                ]
            },
            click: function () { //点击事件
                if (this.status() == 'available') { //可选座
                    $cart.html("");
                    $('<li>'+(this.settings.row+1)+'排'+this.settings.label+'座</li>')
                        .attr('id', 'cart-item-'+this.settings.id)
                        .data('seatId', this.settings.id)
                        .appendTo($cart);
                    //$counter.text(sc.find('selected').length+1);
                    var row = ((this.settings.row+1)+"").length==1?"0"+(this.settings.row+1):(this.settings.row+1);
                    var lable = (this.settings.label+"").length==1?"0"+this.settings.label : this.settings.label;

                    getSeatNum(row+'排',lable+"桌");
                    //return 'selected';
                    return 'available';
                } else if (this.status() == 'selected') { //已选中
                    //更新数量
                    //$counter.text(sc.find('selected').length-1);
                    //删除已预订座位
                    //$('#cart-item-'+this.settings.id).remove();
                    //可选座
                    return 'available';
                } else if (this.status() == 'unavailable') { //已售出
                    return 'unavailable';
                } else {
                    return this.style();
                }
            }
        });
        //已售出的座位
        //sc.get(['1_2', '4_4','4_5','6_6','6_7','8_5','8_6','8_7','8_8', '10_1', '10_2']).status('unavailable');
        getFullTable(sc);
        $("#valid_date").change(function(){
            getFullTable(sc);
            getBeerSeatCount();
        });

    });

    //获取座位剩余数量
    function getSeatNum(row,seat) {
        $.ajax({
            type: "GET",
            url: baseURL + 'noc/nocbeerseat/seatnum',
            contentType: "application/json",
            data: {area:$("#area").text(),table_row:row,table_num:seat,valid_date:$('#valid_date option:selected').text()},
            success: function(r){
                if(r.code === 0){
                    $('#type').text(r.result.type==1?'观众':'展商');
                    $('#counter').text(r.result.seatnum);
                    $('#counter_no').text(r.result.seatnum_no);
                }else{

                }
            }
        });
    }

    function getFullTable(sc){
        $.ajax({
            type: "GET",
            url: baseURL + 'noc/nocbeerseat/getFullTable',
            contentType: "application/json",
            data: {area:$("#area").text(),valid_date:$('#valid_date option:selected').text()},
            success: function(r){
                if(r.code === 0){
                    var list = r.list;
                    var tbs = new Array();
                    for(i=0;i<list.length;i++){
                        console.log(list[i])
                        console.log(list[i].area);
                        console.log(list[i].tableRow);
                        console.log(list[i].tableRow.replace('排','')*1);
                        tbs.push((list[i].tableRow.replace('排','')*1)+'_'+(list[i].tableNum.replace('桌','')*1));
                    }
                    sc.get(tbs).status('unavailable');
                    getLeftNumTable();
                }
            }
        });
    }

    function getLeftNumTable(){
        $.ajax({
            type: "GET",
            url: baseURL + 'noc/nocbeerseat/getLeftNumTable',
            contentType: "application/json",
            data: {area:$("#area").text(),valid_date:$('#valid_date option:selected').text()},
            success: function(r){
                if(r.code === 0){
                    var list = r.list;
                    var tbs = new Array();
                    for(i=0;i<list.length;i++){
                        $("#"+(list[i].tableRow.replace('排','')*1)+'_'+(list[i].tableNum.replace('桌','')*1)).text((list[i].tableNum.replace('桌','')*1)+"/"+list[i].leftNum);
                    }

                }
            }
        });
    }


</script>

<script src="${request.contextPath}/statics/js/modules/noc/nocbeerseat.js?_${.now?long}"></script>
</body>
</html>